<script>
  import {ElMessage} from 'element-plus'  // 错误信息提示
  import {loginFn} from "@/api/login"

export default{
    name:'LoginView',  // 当前组件
    data(){
        return{
            username:'',
            password:''
        }
    },
    methods:{
    // 点击到登录页面
    logout1(){
    //   this.$router.push('/')
    loginFn({
        username: this.username,
        password: this.password,
    }).then(res=>{
        console.log(res)
        if(res.code !=="200"){
            // 未成功
            ElMessage.error(res.msg);
            return;
        }else{
            // 本地存储token  账号和密码
            localStorage.setItem("token",res.token)
            localStorage.setItem("userName",this.username)

          this.$router.push('/')

        }
    })
    }
   }
}

</script>
<template>
    <div class="login-container">

        <div class="form-wrap">
                <img src="../assets/bj1.png" alt="">
            <div class="srk">
                <h2 class="header">公寓管理系统登录</h2>
                <span> 用户名 : </span>
                <el-input v-model="username"  clearable placeholder="请输入管理员账号" />

                <span> 密码 : </span>
                <el-input class="psw" v-model="password" type="password" placeholder="密码" show-password suffix-icon >
                </el-input>
                
                <el-button round size="large" type="success" @click="logout1">登录</el-button>
            </div>
        </div>

    </div>
</template>

<style lang="scss" scoped>
.login-container {
    background-color: rgb(76, 164, 254);
    width: 100%;
    height: 100%;
    position: relative;
}

.form-wrap {
    position: absolute;
    border: 1px solid white;
    border-radius: 30px;
    background-color: white;
    height: 400px;
    width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.form-wrap img {
    height: 300px;
    width: 300px;
}

.srk {
    /* padding: 10px 0 10px 0; */
    padding: 20px 20px 20px;
    margin: 10px 20px 10px 20px;
}
.srk .el-input {
    border-top: none;
    margin-top: 20px;
}
.el-button{
    width: 70%;
    margin: 20px 60px;
}
</style>